import { useState } from 'react';
import { Outlet,history } from 'umi';
import { MailOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import styles from './index.less';
type MenuItem = Required<MenuProps>['items'][number];
export default function Layout() {
  const [menuOpenKey, setMenuOpenKey] = useState(['/']);
  const items: MenuItem[] = [
    {
      key: '/',
      label: '职场图文',
      icon: <MailOutlined />,
    },
    {
      key: '/cstransmission',
      label: '宇宙传音',
      icon: <MailOutlined />,
    },
    {
      key: '/enfp',
      label: 'ENFP',
      icon: <MailOutlined />,
    },
    {
      key: '/mjj',
      label: 'MJG',
      icon: <MailOutlined />,
    },
    {
      key: '/mbit',
      label: 'mbit',
      icon: <MailOutlined />,
    },
  ];

  const onClick: MenuProps['onClick'] = (e) => {
    history.push(e.key);
  };

  return (
    <div className={styles.layouts_wrapper}>
      <div className={styles.left_cotnent}>
        <Menu
          onClick={onClick}
          style={{ width: 256 }}
          openKeys={menuOpenKey}
          mode="inline"
          items={items}
          defaultSelectedKeys={['/']}
          defaultOpenKeys={['/']}
        />
      </div>
      <div className={styles.ringht_content}>
        <Outlet />
      </div>
    </div>
  );
}
